<template :key =time>
    <el-row>
        <el-col :span="12" offset="2">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <h2>博客中心</h2>
                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                </div>
                <!-- <div class ="search">

                </div> -->

                <v-for v-for="item in articles" :key="item" class="text item">
                    <div class="articlediv">
                        <h2>标题：{{ item.title }}</h2>
                        <h4>描述：{{ item.description }}</h4>
                        <img v-for="url in item.imageUrlList" :src="url" class="aticleImage" />
                        <mavonEditor v-model="item.content" :subfield="false" :boxShadow="true" defaultOpen="preview"
                            :toolbarsFlag="true" style="min-height: 200px"></mavonEditor>
                        <el-row style="margin-top: 10px;">
                            <el-col :span="24">
                                <el-input v-model="item.comment" aria-required="true" placeholder="说点什么..."></el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top: 10px;">
                            <el-col :span="1" offset="16">
                                <svg-icon class="icon" icon-class="save2" />
                            </el-col>
                            <el-col :span="1">
                                <svg-icon class="icon" icon-class="prise" />
                            </el-col>
                            <el-col :span="4">
                                <share :config="config"></share>
                            </el-col>
                            <el-col :span="2">
                                <el-button type="primary" @click="commentArticle(item.comment, item.id)">发表评论</el-button>
                            </el-col>
                        </el-row>
                        <div>
                            <el-row v-for="comment in item.commentList" :key="comment" class="comment">
                                <el-col :span="1">
                                    <img :src="comment.avatar" width="40px" height="40px" class="preImage" />
                                </el-col>
                                <el-col :span="22">
                                    <span style="line-height: 40px;">{{ comment.content }}</span>
                                </el-col>
                            </el-row>

                        </div>
                    </div>
                </v-for>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
// 导入组件 及 组件样式
import { mavonEditor } from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
import { Message } from 'element-ui';
import { promised } from 'q';
import { listArticle, commentsArticle } from "@/api/article/queryTag";
export default {
    components: { mavonEditor, Message },
    props: [],
    data() {
        return {
            articles: [],
            config: {
                url: `${location.href}`, // 网址，默认使用 window.location.href
                source: "https://blog.csdn.net", // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
                title: "", // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
                description: "", // 描述, 默认读取head标签：<meta name="description" content="PHP弱类型的实现原理分析" />
                image: "", // 图片, 默认取网页中第一个img标签
                sites: ["weibo", "wechat", "qzone", "qq"], // 启用的站点
            }
        }
    },
    computed: {},
    watch: {},
    created() {
        this.queryArticle();
    },
    mounted() { },
    methods: {
        reloadPage(){
      this.$forceUpdate()
    },
        commentArticle: function (comment, id) {
            commentsArticle(id, comment).then(res => {
                let data = res.data;
                let code = res.code;
                let message = res.message;
                if (code == 200) {
                    this.$message.success("评论成功！！！");
                    this.queryArticle();

                }
                else {
                    this.$message.success("not found");
                }
            })
        },
        queryArticle: function () {
            listArticle().then(res => {
                let data = res.data;
                let code = res.code;
                let message = res.message;
                if (code == 200) {
                    this.articles = data;
                }
            });
        },

    }
}
</script>



<style>
.text {
    font-size: 14px;
}

.icon {
    padding-top: 5px;
    text-align: center;
    font-size: 30px;
}

.aticleImage {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    margin-top: 10px;
    border-radius: 15px;
}

.item {
    margin-bottom: 100px;
}

.comment {
    border-radius: 25px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.05);
    padding: 5px;
    margin-bottom: 4px;
}

.articlediv {
    border-radius: 25px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin-bottom: 40px;
}

.preImage {
    width: 40px;
    height: 40px;
    border-radius: 25px;

}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 160%;
}

.chat {
    border-radius: 10px;
}
</style>